<template>
    <div class="tem-chart-wrapper">
        <div class="timer-choose">
            <div class="dateRange">
                <el-date-picker
                        v-model="value2"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @blur="screenPlay"
                        align="right" size="small" style="color: #1a5cd7;background-color: #1a92d7">
                </el-date-picker>
            </div>
        </div>
        <div style="width: auto;height: 4.8rem" id="main"></div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    import Axios from "axios";
    export default {
        name: "temChart",
        data() {
            return {
                minNumber:'',
                maxNumber:'',
                value2: ''
            }
        },
        created() {
            this.echartsInit();
        },
        mounted() {
            this.echartsInit();
        },
        methods:{
            p(s) {
                return s < 10 ? '0' + s : s
            },
            screenPlay(){
                let a = this.value2;
                // this.$store.state.timeSlot = a[0]
                let b = a[0];
                let c = a[1];
                const d = new Date(b)
                const e = new Date(c)
                const resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate())
                const resTime = this.p(d.getHours()) + ':' + this.p(d.getMinutes()) + ':' + this.p(d.getSeconds())
                const resDate1 = e.getFullYear() + '-' + this.p((e.getMonth() + 1)) + '-' + this.p(e.getDate())
                const resTime1 = this.p(e.getHours()) + ':' + this.p(e.getMinutes()) + ':' + this.p(e.getSeconds())
                // console.log(resDate + " " + resTime)
                let dd = resDate + " " + resTime
                this.$store.state.startTime = dd;
                // console.log(resDate1 + " " + resTime1)
                let ee = resDate1 + " " + resTime1;
                this.$store.state.endTime = ee;
                // console.log('http://49.232.131.98/mqtt/data/list/'+ dd +'/'+ ee);
                Axios.get('http://49.232.131.98/mqtt/data/list/'+ dd +'/'+ ee).then((res) => {
                    // console.log(res);
                    let a = res.data.data.data;
                    // console.log(a)
                    var timeAr = [];
                    var temAr = [];
                    var oxAr = [];
                    var phAr = [];
                    var saltAr = [];
                    var nhAr = [];
                    var zhuoAr = [];
                    for(var i=0;i<a.length;i++){
                        // this.$store.state.temArr.push(a[i].temperature)
                        // this.$store.state.oxArr.push(a[i].dissolvedOxygen)
                        // this.$store.state.phArr.push(a[i].phValue)
                        // this.$store.state.saltArr.push(a[i].salinity)
                        temAr.push(a[i].temperature)
                        oxAr.push(a[i].dissolvedOxygen)
                        phAr.push(a[i].phValue)
                        saltAr.push(a[i].salinity)
                        nhAr.push(a[i].anconcentration)
                        zhuoAr.push(a[i].turbidity)
                        timeAr.push(a[i].createTime)
                    }
                    this.$store.state.temArr = temAr
                    this.$store.state.oxArr = oxAr
                    this.$store.state.phArr = phAr
                    this.$store.state.saltArr = saltAr
                    this.$store.state.nhArr = nhAr
                    this.$store.state.zhuoArr = zhuoAr
                    this.$store.state.timeInfor = timeAr
                    // this.totalInfor = res
                    this.echartsInit()
                }).catch((err) => {

                    console.log(err)

                });

            },
            echartsInit() {
                echarts.init(document.getElementById('main')).setOption({
                    xAxis: {
                        type: 'category',
                        name:'days',
                        axisLabel:{
                            formatter:'{value}'
                        },
                        data: this.$store.state.timeInfor,
                        axisLine:{
                            lineStyle:{
                                color:'#33cea0'
                            }
                        },
                    },
                    yAxis: {
                        // scale:true,
                        // max:this.$store.state.temArr+4,
                        // min:this.$store.state.temArr-4,
                        type: 'value',
                        name:'°C',
                        axisLabel:{
                            formatter:'{value}°C'
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#33cea0'
                            }
                        },
                        axisTick:{
                            show:false
                        },
                        splitLine:{
                            show:false
                        }
                    },
                    series: [{
                        hoverAnimation: true, //是否开启 hover 在拐点标志上的提示动画效果
                        data: this.$store.state.temArr,
                        type: 'line',
                        smooth: true,
                        itemStyle : { normal: {
                                label : {show: true,color:'white',backgroundColor:'black'}

                            }},
                    }],
                    color:'#789bc3',
                    textStyle:{
                        color:'#33cea0'
                    }
                },true);
            }
        }
    }
</script>

<style scoped lang="scss">
    #main{

    }

    .timer-choose{
        position: absolute;
        z-index: 100;
        right: 0.5rem;
        margin-top: 0.25rem;
    }
    .el-radio{
        color: #d3d6dd;
    }

    .dateRange >>> ::-webkit-input-placeholder {
        color: #26f2ff !important;
    }
    .dateRange >>> ::-moz-input-placeholder {
        color: #26f2ff !important;
    }
    .dateRange >>> ::-ms-input-placeholder {
        color: #26f2ff !important;
    }
</style>
